{include file="public/head" title="认证" keywords="认证" description="认证" /}
<style>
    .toauth span{
        font-size: 0.7rem;
    }
    .toauth input{
        font-size: 0.7rem;
    }
    .mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{
        line-height: 1.8;
        font-size: 25px;
    }
    .mui-checkbox.mui-left label, .mui-radio.mui-left label{
        padding-left: 48px;
        padding-right: 0px;
    }
    .mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{
        color: #01cebf;
    }
    .uploadImg{cursor:pointer; overflow:hidden; position:relative;width: 5rem;height: 5rem;}
    .file{ cursor:pointer;position:absolute; z-index:100; left:0;top:0;width: 5rem;height: 5rem;opacity:0;filter:alpha(opacity=0);}
    .uploadImg a{cursor:pointer;margin-top:0.5rem;top:0.5rem;left:0;display: block;width: 5rem;height: 5rem;text-align: center;line-height:  5rem;color:white;font-size:14px;font-weight:normal;}
</style>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
    <!-- 菜单容器 -->

    <div class="mui-inner-wrap">
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper" style="background-color: #fff;">
            <div class="mui-scroll">
                <header class="tx_head">
                    <p>
                        <a href="{:url('index')}" class="header_p1"><span class="mui-icon mui-icon-arrowleft"></span></a>
                    <h5>用户认证</h5>
                    </p>
                </header>
                <main class="wdzh_main">
                    <section class="wdzh_main_section1">
                        <div style="{if condition='$status eq 1'}border-bottom: 1px solid #01cebf {/if}">
                            <a href="{:url('Account/toauth')}"><div>

                                <p class="tbp">个人认证</p>
                            </div></a>
                        </div>
                        <div style="{if condition='$status eq 2'}border-bottom: 1px solid #01cebf {/if}">
                            <a href="{:url('Account/fuwushang')}"><div>

                                <p class="tbp">服务商认证</p>
                            </div></a>
                        </div>

                    </section>
                    <section class="">
                        <ul class="">
                            <li class="jyjl_li" style="border-bottom: 7px solid #f3f3f3;line-height: 0;height: 0.1rem;">

                            </li>
                            <li  class="toauth"><span>负责人姓名:</span>
                                {if !empty($users.real_name) && ($users.step == 2 || $users.step == 3)}<span>{$users.real_name}</span>{else /}
                                <input type="text" id="realname" value="{$users.real_name}" placeholder="负责人姓名"/>
                                {/if}
                            </li>
                            <li class="toauth"><span style="margin-right: 1rem;">联系电话:</span>
                                {if !empty($users.phone) && ($users.step == 2 || $users.step == 3)}<span>{$users.phone}</span>{else /}
                                <input type="text" id="phone" value="{$users.phone}" placeholder="联系电话"/>
                                {/if}
                            </li>
                            <li class="toauth"><span style="margin-right: 1rem;">紧急联系人:</span>
                                {if !empty($users.mobile) && ($users.step == 2 || $users.step == 3)}<span>{$users.mobile}</span>{else /}
                                <input type="text" id="phone1" value="{$users.mobile}" placeholder="紧急联系人手机号"/>
                                {/if}
                            </li>
                            <li class="toauth"><span style="margin-right: 1rem;">身份证号:</span>
                                {if !empty($users.real_name) && ($users.step == 2 || $users.step == 3)}<span>{$users.identity}</span>{else /}
                                <input  type="text" id="identity" value="{$users.identity}"  placeholder="身份证号"/>
                                {/if}
                            </li>
                            <!--<li class="toauth"><span style="margin-right: 1rem;">服务区域:</span>-->
                                <!--<input  type="text" id="area" value="" placeholder="服务区域"/>-->
                                <!--<input type="hidden" id="area_id"  placeholder="服务区域"/>-->
                            <!--</li>-->
                            {php}
                                $img_s = explode(',',$users['img']);
                                $img_s1 = isset($img_s[0])&& !empty($img_s[0])?$img_s[0]:'';
                                $img_s2 = isset($img_s[1])&& !empty($img_s[1])?$img_s[1]:'';
                                $img_s3 = isset($img_s[2] )&& !empty($img_s[2])?$img_s[2]:'';
                            {/php}
                            <li class="toauth f_input" style="width: 100%;line-height: 10rem;height:10rem;">
                                <span>身份证正面:</span>
                                    <span class="uploadImg" style="width: 65%;height: 9rem;">
                                        <!--<input type="file" class="file" id="file_3" onchange="upimg(3)" style="height: 9rem;width: 100%;" size="1" >-->
                                <a  {if $img_s1 =="" ||  $users.step == 1} href="javascript:upimg(3);" {else /}  href="javascript:;"{/if} style="width: 100%;height: 9rem;">
                                    <img {if condition='$img_s1 eq "" '}src="/static/wap/20181201173806.png "{else /} src = '{$img_s1}' {/if}  id="img_3" style="width: 100%;height:  8.459rem;border: 1px solid #f2f2f2;" />
                                </a>
                                    </span>
                            </li>
                            <li class="toauth f_input" style="width: 100%;line-height: 10rem;height:10rem;">
                                <span>身份证反面:</span>

                                <span class="uploadImg" style="width:  65%;height: 9rem;">
                                    <!--<input type="file" class="file" id="file_4" style="height: 9rem;width: 100%;" onchange="upimg(4)" size="1" >-->
                                <a {if $img_s2=="" ||  $users.step == 1} href="javascript:upimg(4);" {else /}  href="javascript:;"{/if} style="width: 100%;height: 9rem;">
                                    <img {if condition='$img_s2 eq "" '}src="/static/wap/20181201173806.png " {else /} src = '{$img_s2}' {/if}  id="img_4" style="width: 100%;height:  8.459rem;border: 1px solid #f2f2f2;" />
                                </a>
                                </span>
                            </li>
                            <li class="toauth f_input" style="width: 100%;line-height: 10rem;height:10rem;">
                                <span>手持身份证:</span>

                                <span class="uploadImg" style="width:  65%;height: 9rem;">
                                    <!--<input type="file" class="file" id="file_5" style="height: 9rem;width: 100%;" onchange="upimg(5)" size="1" >-->
                                <a {if $img_s3== "" || $users.step == 1} href="javascript:upimg(5);" {else /}  href="javascript:;"{/if}style="width: 100%;height: 9rem;">
                                    <img {if condition='$img_s3 eq "" '}src="/static/wap/20181201173806.png " {else /} src = '{$img_s3}' {/if}  id="img_5" style="width: 100%;height:  8.459rem;border: 1px solid #f2f2f2;" />
                                </a>
                                </span>
                            </li>

                            {php}
                                $img_e  = explode(',',$users['imgs']);
                                $img_e1 = isset($img_e[0]) && !empty($img_e[0])?$img_e[0]:"";
                                $img_e2 = isset($img_e[1]) && !empty($img_e[1])?$img_e[1]:"";
                                $img_e3 = isset($img_e[2]) && !empty($img_e[2])?$img_e[2]:"";
                            {/php}
                            <li class="toauth" style="width: 100%;line-height: 6rem;height:6rem;margin-right: 20px">
                                <span style="margin-right: 0.5rem;">技能证书:</span>

                                  <table>
                                      <tr>
                                          <td style="padding-right: 1px;">
                                              <li class="f_input" style="">
                                                <a {if $img_e1=="" || $users.step == 1} href="javascript:upimg(0);" {else /}  href="javascript:;"{/if}>
                                                    <img {if condition='$img_e1 eq "" '}src="/static/wap/20181201173806.png "{else /} src = '{$img_e1}' {/if}  id="img_0" style="width: 5rem; height: 5rem;border: 1px solid #f2f2f2;" />
                                                </a>
                                              </li>
                                          </td>
                                            <td style="padding-right: 1px;">
                                              <li class="f_input" style="">
                                                  <a {if condition='$img_e2 eq "" '|| $users.step == 1} href="javascript:upimg(1);"  {else /}  href="javascript:;"{/if}>
                                                      <img {if condition='$img_e2 eq "" '}src="/static/wap/20181201173806.png "{else /} src = '{$img_e2}' {/if}  id="img_1" style="width: 5rem; height: 5rem;border: 1px solid #f2f2f2;" />
                                                  </a>
                                              </li>
                                          </td>
                                            <td style="padding-right: 1px;">
                                              <li class="f_input" style="">
                                                  <a {if condition='$img_e3 eq "" ' || $users.step == 1} href="javascript:upimg(2);" {else /}  href="javascript:;"{/if} >
                                                      <img {if condition='$img_e3 eq "" '}src="/static/wap/20181201173806.png "{else /} src = '{$img_e3}' {/if} id="img_2" style="width: 5rem; height: 5rem;border: 1px solid #f2f2f2;" />
                                                  </a>
                                              </li>
                                          </td>
                                      </tr>
                                  </table>
                            </li>

                            <li class="toauth ">
                                <span>保证金:</span>
                                <span class=" mui-radio mui-left" style="margin-left: -10px;">

                                    <input name="radio1" onclick="test(this)" value="5" checked type="radio">
                                     <label>0元</label>
                                </span>

                                <span class=" mui-radio mui-left" style="margin-left: -10px;">
                                    <input name="radio1" onclick="test(this)" value="1" checked type="radio">
                                    <label>{$config.a_bail}元</label>
                                </span>


                                <span class=" mui-radio mui-left" style="margin-left: -10px;">
                                    <label>{$config.a_bail_two}元</label>
                                    <input name="radio1" onclick="test(this)" value="2" type="radio">
                                </span>
                                <span class=" mui-radio mui-left" style="margin-left: -10px;">
                                    <label>{$config.a_bail_three}元</label>
                                    <input name="radio1" onclick="test(this)" value="3" type="radio">
                                </span>
                            </li>
                            <li class="toauth" style="padding: 10px;text-align: left;border-bottom:none;height: -webkit-fit-content;">

                                    <label style=" display: block; height: 1.5rem;line-height: 1.5rem;color: #000;font-size: 14px;">保证金说明：</label>
                                  <span style="line-height: 1rem;width: 97%;border: 1px solid #f2f2f2;padding: 1rem;">  {$config.remark}</span>

                            </li>

                            <li class="toauth" style="padding: 10px;text-align: center;border-bottom:none;">
                                <input style="width: 280px;height: 3rem; background: #01cebf;font-size: 1.4rem;    " type="submit" id="bank_btn" value="提交" placeholder=""/>
                            </li>
                        </ul>

                    </section>
                </main>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
            </div>
        </div>
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>
<input type="hidden" name="imgs_0"  value = '{$img_e1}'>
<input type="hidden" name="imgs_1"  value = '{$img_e2}'>
<input type="hidden" name="imgs_2"  value = '{$img_e3}'>
<!--身份证-->
<input type="hidden" name="imgs_3"  value = '{$img_s1}'>
<input type="hidden" name="imgs_4"  value = '{$img_s2}'>
<input type="hidden" name="imgs_5" value = '{$img_s3}'>
{include file="public/footer"}
</body>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
    mui('body').on('tap','a',function(){
        var str = this;
        // 强制转换为字符串
        str = String(str);
    });
    function upimg(i) {

        $.ajax({
            url: "{:url('Account/test')}",//请求地址
            type: 'post',//post请求
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            data: {
                'url': location.href.split('#')[0]//将第一个#号前的地址传递
            },
            success: function (data) {
                wx.config({
//                    debug: true,
                    appId: data.data.appId,
                    timestamp: data.data.timestamp,
                    nonceStr: data.data.nonceStr,
                    signature: data.data.signature,
                    jsApiList: ['uploadImage', 'chooseImage', 'downloadImage','previewImage']
                });
                wx.ready(function () {
                    wx.chooseImage({
                        count: 1, // 默认9
                        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                        success: function (res) {
                            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                            $('#img_'+i).attr('src', localIds[0]);
                            // 上传照片
                            wx.uploadImage({
                                localId: '' + localIds[0],
                                isShowProgressTips: 1,
                                success: function (res) {
                                    serverId = res.serverId;
                                    $.ajax({
                                        url:'{:url("wximg")}',
                                        type: "post",
                                        dataType: "json",
                                        data: {
                                            localData: serverId,
                                        },
                                        success: function (data) {
//                                            $('#img_'+i).attr('src',data.src);
//                                            alert(i)
                                            $('input[name="imgs_'+i+'"]').val(data.src);
                                        },
                                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                                            alert(errorThrown);
                                        },
                                    });
                                }
                            });
                        }
                    });
                });


            }
        })
    }


//    function upimg(i) {
//        var reads= new FileReader();
//        f=document.getElementById('file_'+i).files[0];
//        reads.readAsDataURL(f);
//        reads.onload=function (e) {
//            $.ajax({
//                type:"post",
//                url:'{:url("uplaodimg")}',
//                dataType:"json",
//                data:{file:this.result},
//                success: function(data){
//                    if(data.code == 1){
//                        layer.msg(data.msg, {icon: 6, time: 1000},function(){
//
//                            $('#img_'+i).attr('src',data.data.src);
//                            $('input[name="imgs_'+i+'"]').val(data.data.src);
//                        });
//                    }else{
//                        layer.msg(data.msg, {icon: 5, time: 2000});
//                    }
//                }
//            });
//        };
//    }
//
//    $('#area').bind("click",function () {
//        var data =[];
//        $.get('{:url("getarea")}',function (res) {
//            data =  res.data;
//            var picker = new mui.PopPicker({   //这里注意大小写PopPicker
//                layer: 3,  //表示三列，即三级菜单或者联动
//                buttons:['取消', '确定']     //显示按钮
//            });
//            console.log(data);
//            picker.setData(data);
//            //这里代表被选中的元素
//            picker.show(function (selectItems) {
//                $("#area").val(selectItems[0].text+'-'+selectItems[1].text+'-'+selectItems[2].text);
//                $("#area_id").val(selectItems[0].value+','+selectItems[1].value+','+selectItems[2].value);
//            })
//        });
//    });

    $("#bank_btn").click(function(){
        var realname = $("#realname").val();
        var phone = $("#phone").val();
        var identity = $("#identity").val();
        var img3 = $('input[name="imgs_0"]').val()+','+$('input[name="imgs_1"]').val()+','+$('input[name="imgs_2"]').val();
        var img1 = $('input[name="imgs_3"]').val()+','+$('input[name="imgs_4"]').val()+','+$('input[name="imgs_5"]').val();
//        var area_id = $("#area_id").val();
        var phone1 = $("#phone1").val();
        var type = $("input[name='radio1']:checked").val();
        if(realname.length < 1){
            layer.msg('请填写姓名', {icon: 5, time: 2000});
            return;
        }

        if (phone == ''){
            layer.msg('请填写手机号', {icon: 5, time: 2000});
            return;
        }
        if (phone1 == ''){
            layer.msg('请填写紧急联系人手机号', {icon: 5, time: 2000});
            return;
        }
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
        if (!myreg.test(phone)){
            layer.msg('请填写正确手机号', {icon: 5, time: 2000});
            return;
        }
        if (!myreg.test(phone1)){
            layer.msg('请填写正确紧急联系人手机号', {icon: 5, time: 2000});
            return;
        }
        if (phone == phone1){
            layer.msg('紧急联系人手机号不能相同', {icon: 5, time: 2000});
            return;
        }

        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if(reg.test(identity) === false){
            layer.msg('请填写正确的身份证号', {icon: 5, time: 2000});
            return;
        }

        if($('input[name="imgs_3"]').val().length < 1 || $('input[name="imgs_4"]').val() < 1){
            layer.msg('请上传身份证', {icon: 5, time: 2000});
            return;
        }


        $.ajax({
            type:"post",
            url:'{:url("toauth")}',
            dataType:"json",
            data:{realname:realname,phone:phone,phone1:phone1,identity:identity,img3:img3,img1:img1,type:type},
            success: function(data){

                if(data.code == 1){
                    layer.msg(data.msg, {icon: 6, time: 1000},function(){
                        if (data.data.money > 0){
                            window.location.href = "/index/account/todopay?money="+data.data.money;
                        }else {
                            window.location.href = "/index/account/index";
                        }

                    });
                }else{
                    layer.msg(data.msg, {icon: 5, time: 2000});
                }
            }
        });
    });
</script>
</html>